<template>
  <el-dialog
    :title="showview === 'create'? '添加规格信息': '修改规格信息'"
    :visible="true"
    custom-class="dialogWrapper"
    :before-close="closeDialog"
    >
    <div class="labbox" v-for="(domain, index) in SelectList">
      <span class="lable">{{domain.specName}}</span>
       <select class="labselect">
          <option class="labopt valuenone" :value="0">无规格</option>
          <option class="labopt" v-for="(item,index) in domain.children"  :value="item.id">{{item.specName}}</option>
      </select>
    </div>
    
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="primary" @click="submit()">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {queryspec } from "@/services/spec";
import { mapActions } from "vuex";
import { RequestError } from "@/services/errors";
export default {
  name: "edit-role",
  data () {
    return {
      SelectList:[],
      model:"",
      specData: {
        specId: "",
        specName: ""
      },
      showview:""
    }
  },
  methods: {
    ...mapActions(["setUserInfo"]),
    closeDialog() {
      this.$emit("close");
    },
    async loadSelect () {
        try {
          let data = await queryspec()
          this.SelectList = data.specList
        } catch (e) {
          if (e instanceof RequestError) {
            this.$alert(e.message, '提示', {
              type: 'error',
              confirmButtonText: '确定'
            })
          } else {
            throw e
          }
        }
        this.loading = false
    },
    submit(formName) {
      var specId = ""
      var specName = ""
      var index = ""
      $(".labselect").each(function(){
        if($(this).val() != "0"){
          specId += $(this).val()+",";
        }
          index = $(this).get(0).selectedIndex
        if($(this).children('option').eq(index).text() != "无规格"){
          specName += $(this).children('option').eq(index).text()+","
        }
      });
      specId = specId.substring(0,specId.length-1);
      specName = specName.substring(0,specName.length-1);
      this.specData.specId = specId;
      this.specData.specName = specName;
      this.$emit("succback", this.specData);
      this.$emit("close");
    }
  },
  mounted() {
        
  }
};
</script>
<style>
.dialogWrapper {
  width: 540px;
}
.el-select {
  width: 100%;
}
.labbox{
  width: 100%;
  height: 36px;
  padding-bottom: 50px;
}
.lable{
  text-align: right;
  vertical-align: middle;
  float: left;
  font-size: 14px;
  color: #48576a;
  line-height: 1;
  padding: 11px 12px 11px 0;
  box-sizing: border-box;
  padding-left: 20px;
}
.valuenone{
  color: #bfcbd9;
}
.labselect{
    width: 80%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #bfcbd9;
    box-sizing: border-box;
    color: #1f2d3d;
    font-size: inherit;
    height: 36px;
    line-height: 1;
    outline: 0;
    padding: 3px 10px;
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    margin-left: 20px;
}
.labopt{
    font-size: 14px;
    padding: 8px 10px;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #48576a;
    height: 36px;
    line-height: 1.5;
    box-sizing: border-box;
    cursor: pointer;
}
</style>
